<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{background: #efefef;}
            
        #small{
            width: 576px;
            height: 324px;
            position: absolute;
            left: 10px;
            top: 50px;
        }

        #box{
            width: 172px;
            height: 97px;
            background-color: #87B3D6;
            cursor: crosshair;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;
        }

        #big{
            width: 576px;
            height: 324px;
            overflow: hidden;
            position: absolute;
            left: 620px;
            top: 50px;
            display: none;
        }
    </style>    
</head>
<body>
    <div id="small">
        <img src="./smallimage.jpg" />
        <div id="box"></div>
    </div>
    
    <div id="big">
        <img src="./bigimage.jpg" id="img" style="position: absolute; left: 0; top: 0;" />
    </div>    
</body>
</html>

<script>
    var small = document.getElementById('small')
    var box = document.getElementById('box')
    var big = document.getElementById('big')
    var img = document.getElementById('img')

    small.onmousemove = function(e)
    {
        box.style.opacity = 0.5
        big.style.display = 'inline-block'
        var x = e.clientX - small.offsetLeft - 86
        var y = e.clientY - small.offsetTop - 48.5

        if (x < 0)
        {
            x =0   
        }else if(x > 404)
        {
            x =404
        }

        if (y < 0)
        {
            y = 0
        }else if(y > 227)
        {
            y = 227
        }

        box.style.left = `${x}px`
        box.style.top = `${y}px`

        img.style.left = `-${x*(1920/576)}px`
        img.style.top = `-${y*(1080/324)}px`
    }

    small.onmouseleave = function()
    {
        box.style.opacity = 0
        big.style.display = 'none'
    }
</script>    